<template>
  <div class='randoms-container'>
    <div class="app-container">
      <el-card class="box-card">
        <!-- 页面顶部 -->
        <div class="btn-wrapper">
          <el-form :inline="true" :model="randomsFormData" ref="randomsFormDataRef">
            <el-row>
              <el-col >
                <el-form-item label="关键字" size="small" style="padding: 0 0 0 20px; margin-bottom: 0px;">
                  <el-input v-model="randomsFormData.keyword" placeholder="根据编号搜索" class="numbers"></el-input>
                </el-form-item>
                <el-form-item style="float: right">
                  <el-button @click="clearKeywordContent" size="small">清除</el-button>
                  <el-button type="primary" @click="searchKeywordContent" size="small">搜索</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <!-- 页面顶部/ -->

        <!-- 列表总条数提示栏 -->
        <el-alert
          title="数据一共多少条"
          type="info"
          show-icon
          :closable="false"
          class="totalNav">
          <template slot="title">
              <span>数据一共{{ total }}条</span>
            </template>
        </el-alert>
        <!-- 数据提示栏/ -->

        <!-- 列表区域 -->
        <el-table
        :data="randomsListData"
        class="randomsList"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="编号"
          width="220">
        </el-table-column>
        <el-table-column
          prop="questionType"
          label="题型"
          width="80">
          <template slot-scope="scoped">
            <span v-if="scoped.row.questionType === '1'">单选</span>
            <span v-else-if="scoped.row.questionType === '2'">多选</span>
            <span v-else>简答</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="questionIDs"
          label="题目编号"
          width="220">
          <template slot-scope="scoped">
            <a href="javascript:;" v-for="(item, i) in scoped.row.questionIDs" :key="i" style="color: #409eff;" @click="testPreviewClick(item)">
              <p style="margin: 0px; padding: 0px;">{{item.number}}</p>
            </a>
          </template>
        </el-table-column>
        <el-table-column
          prop="addTime"
          label="录入时间"
          width="180">
           <template slot-scope="scoped" >
            {{scoped.row.addTime | parseTimeByString}}
          </template>
        </el-table-column>
        <el-table-column
          prop="totalSeconds"
          label="答题时间(s)"
          width="160">
        </el-table-column>
        <el-table-column
          prop="accuracyRate"
          label="正确率(%)"
          width="160">
        </el-table-column>
        <el-table-column
          prop="userName"
          label="录入人"
          width="160">
        </el-table-column>
        <el-table-column
          label="操作"
         >
          <template slot-scope="scoped">
              <el-tooltip content="删除" placement="bottom-start" effect="light">
              <el-button plain type="danger" @click="deleteListhandle(scoped.row)" size="mini" icon="el-icon-delete" circle></el-button>
              </el-tooltip>
          </template>
        </el-table-column>
        </el-table>
        <!-- 列表区域/ -->

        <!-- 分页器 -->
        <div class="block paginationConfig"  style="margin-top: 20px; text-align: right;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="paginationDate.page"
            :page-sizes="[20, 30, 50, 100]"
            :page-size="paginationDate.pagesize"
            background
            layout="prev, pager, next, sizes, jumper"
            :total="total">
          </el-pagination>
        </div>
        <!-- 分页器/ -->
        <!-- 题目预览对话框 -->
      <el-dialog
        title="题目预览"
        v-if="testPreviewVisible"
        :visible.sync="testPreviewVisible">
        <test-preview :testPreviewDate="testPreviewDateNew" ></test-preview>
        <template slot="footer">
          <el-button type="primary" @click="testPreviewVisible = false">关闭</el-button>
        </template>
      </el-dialog>
      <!-- 题目预览对话框/ -->
     </el-card>
   </div>
  </div>
</template>

<script>
// 导入组题列表数据接口
import { randoms } from '@/api/hmmm/questions'
// 导入试题预览组件模块
import TestPreview from '../components/questions-preview'
// 导入组题列表数删除数据接口
import { removeRandoms } from '@/api/hmmm/questions'
// 导入基础题库列表数据接口
import { detail } from '@/api/hmmm/questions'
export default {
  name: 'RandomsContainer',
  components: {
    // 试题预览组件注册
    TestPreview
  },
  data () {
    return {
      randomsFormData: {
        // 关键字
        keyword: '',
      },
      // 题组试题列表数据
      randomsListData: [],
      // 分页器数据
      paginationDate: {
        page: 1,
        pagesize: 20,
      },
      // 总页数
      total: 0,
      // 试题预览对话框的显示与隐藏
      testPreviewVisible: false,
      // 当前试题预览数据
      testPreviewDateNew: {}

    }
  },
  methods: {
    // 获取试题列表数据
    async getRandomsList () {
      try {
        const { data: res } = await randoms({
          page: this.paginationDate.page,
          pagesize: this.paginationDate.pagesize,
          keyword: this.randomsFormData.keyword
        })
        // console.log(res)
        this.total = res.counts
        this.randomsListData = res.items
        this.randomsFormData.keyword = res.items.id
      } catch (err) {
        this.$message.error('数据异常，请稍后重试！')
      }
    },
    // 点击题目编号，对所点击的题目进行预览
    async testPreviewClick (testPreview) {
      // 点击预览按钮，展示弹出框
      this.testPreviewVisible = true
      let currentTestID = testPreview.id
      try {
        const { data } = await detail({ id: currentTestID })
        // 调用基础题库信息
        this.testPreviewDateNew = data
        console.log(data)
      } catch (err) {
        this.$message.error('当前数据异常，请稍后重试！')
      }
    },
    // 改变页码范围
    handleSizeChange (pagesize) {
      this.paginationDate.pagesiz = pagesize
      this.getRandomsList()
    },
    // 改变当前页
    handleCurrentChange (page) {
      this.paginationDate.page = page
      this.getRandomsList()
    },
    // 列表区域删除功能的操作
    async deleteListhandle (removeList) {
      // console.log(removeList)
      // 根据id值删除对应当前行的试题
      const randomsItemID = removeList.id
      // console.log(randomsItemID)
      // 弹框询问用户是否删除该行试题
      const confirmResult = await this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除！')
      }
      await removeRandoms({id: randomsItemID})
      this.$message.success('删除成功！')
      // 删除成功后渲染table列表
      this.getRandomsList()
    },
    // 清除关键字文本框的搜索内容
    clearKeywordContent () {
      this.$refs.randomsFormDataRef.resetFields()
      this.randomsFormData.keyword = ''
      this.getRandomsList()
    },
    // 搜索数据的实现
    async searchKeywordContent () {
      const { data } = await randoms({
        ...this.randomsFormData,
        ...this.paginationDate
      })
      // console.log(data)
      this.total = data.counts
      this.randomsListData = data.items
    }
  },
  created () {
    this.getRandomsList()
  }
}
</script>

<style scoped lang='less'>
.randoms-container {
  padding: 0 10px;
  .numbers {
    width: 230px;
  }
  .totalNav {
    margin-bottom: 15px;
  }
}
/deep/.el-dialog {
  .el-dialog__footer {
    text-align: right;
   }
}
</style>
